<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<style>
    .mini-panel-border {
        border-left: none;
    }
    .mini-grid-cell{
        padding:3px 5px;
    }
    span.hx_hover:hover{
        cursor: pointer;
        color: #D01405;
        text-decoration:underline;
    }
</style>
<div class="mini-splitter" style="width:100%;height:820px;">
    <div size="160" showCollapseButton="false" minSize="160">
        <div style="border-bottom:1px solid #E4EAEC;padding:7px 0 7px 5px;font-size:14px;">
            商品分类
        </div>
        <ul id="category" class="mini-tree" url="${ctx}/category/list?module=mall" style="margin:8px 5px;"
            showTreeIcon="true" textField="catName" idField="catId" parentField="parentId" resultAsTree="false"
            showArrow="true"  autoLoad="true" onnodeclick="onGoodsNodeClick" expandOnLoad="0"
        >
        </ul>
    </div>
    <div showCollapseButton="false">
        <!-- 工具栏 -->
        <div class="mini-toolbar">
            <table>
                <tr>
                    <td style="width:100%;">
                        <a id="add" class="mini-button" iconCls="icon-cup-add">增加</a>
                        <a id="edit" class="mini-button" iconCls="icon-cup-edit">编辑</a>
                        <a id="remove" class="mini-button" iconCls="icon-cup-delete">删除</a>
                        <span class="separator"></span>
                        <a id="a" class="btn-default btn_see"><i class="fa fa-random"></i>导出Excel</a>
                        <a id="b" class="btn-default btn_see"><i class="fa fa-random"></i>导入Excel</a>
                        <a id="c" class="btn-default btn_see"><i class="fa fa-random"></i>生成静态</a>
                    </td>
                    <td style="white-space:nowrap;">
                        条件 <input id="tj" class="mini-combobox w100" showNullItem="true" emptyText="选择条件" valueField="val"
                                  textField="name" url="${ctx}/dict/code?id=YHTJ&_refresh"/>
                        <input id="key" class="mini-textbox w200" emptyText="请输入标题关键字"/>
                        <a id="search" class="mini-button" iconCls="icon-search" style="margin-right:0;">查询</a>
                    </td>
                </tr>
            </table>
        </div>
        <div id="goodsGrid" class="mini-datagrid" multiSelect="true" showVGridLines="false"
             url="${ctx}/goods/page" idField="id" pageSize="8" selectOnLoad="false"
        >
            <div property="columns">
                <div type="checkcolumn" width="10"></div>
                <div field="id" width="15">编号</div>
                <div field="goodsThumb" width="80" renderer="r.renderThumb">商品名称</div>
                <div field="beMall" width="30" renderer="r.renderBeMall">商家名称</div>
                <div field="shopPrice" width="80" renderer="r.renderPrice">市场价/本店价/促销价</div>
                <div field="sortOrder" width="25" renderer="r.renderSortOrder">排序</div>
                <div field="goodsNum" width="20">SKU/库存</div>
                <div field="hits" width="20">浏览数</div>
                <div field="isShow" width="25" renderer="r.renderIsShow">状态</div>
                <div field="createTime" width="40" renderer="r.renderCreateTime">描述/添加日期</div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var init = function(){
        mini.parse();
        var grid = mini.get("goodsGrid");
        grid.load();
        //删除数据操作
        $("a#remove").click(function () {
            var rows = grid.getSelecteds();
            if (rows.length == 0)
                alert("请选着一条记录进行删除");
            else {
                confirm("您是否确定需要删除该条记录？", function () {
                    var ids = [];
                    for (var i = 0, l = rows.length; i < l; i++) {
                        var r = rows[i];
                        ids.push(r.id);
                    }
                    $.post("${ctx}/goods/delete", {ids: ids}, function (res) {
                        if (res.code == 0) {
                            tips.success("成功删除 " + res.data + " 条记录!");
                            grid.reload();
                        } else
                            tips.error(res.message);
                    });
                });
            }
        });

        //跳转添加商品
        $("a#add").click(function(){
            app.loadMain("${ctx}/admin/b2b2c/add.jsp", 0, "商品管理 - 添加商品");
        });

        //跳转编辑商品
        $("a#edit").click(function(){
            var rows = grid.getSelecteds();
            if(rows.length == 0){
                alert("请选择一条记录进行编辑!");
            }else if(rows.length > 1){
                alert("只能选择一条记录进行编辑!");
            }else {
                app.loadMain("${ctx}/admin/b2b2c/add.jsp?id=", 0, "文章管理 - 编辑文章", rows[0].id);
            }
        });

        var tip = new mini.ToolTip();
        tip.set({
            target: document,
            selector: '[data-placement]',
            onbeforeopen: function (e) {
                e.cancel = false;
            },
            onopen: function (e) {
                var brief = $(e.element).attr("data-brief");
                this.showLoading();
                setTimeout(function(){
                    tip.setContent(`<div style="width:200px;height:50px;text-align: left;overflow: hidden;text-overflow:ellipsis;">`+brief+`</div>`);
                }, 200);
            }
        });
    }


    var r = {
        renderThumb: function(e){
            var rec = e.record;
            var bz_text = "";
            var bz_css = 'margin-top:-2px;';
            //1，最新； 2，推荐；3、热门；4、促销'
            if(rec.goodsType == 0)
                bz_css =  'margin-top:5px;';
            else if(rec.goodsType == 1)
                bz_text = `<span style="color:#fff;background:#5CB85C;border-radius: 2px;padding:2px 8px;">最新</span>`;
            else if(rec.goodsType == 2)
                bz_text = `<span style="color:#fff;background:#418AC9;border-radius: 2px;padding:2px 8px;">推荐</span>`;
            else if(rec.goodsType == 3)
                bz_text = `<span style="color:#fff;background:#F0AD4E;border-radius: 2px;padding:2px 8px;">热门</span>`;
            else if(rec.goodsType == 4)
                bz_text = `<span style="color:#fff;background:#ec5151;border-radius: 2px;padding:2px 8px;">促销</span>`;
            return `<img src="${ctx}`+ e.value +`" style="width:68px;height:68px;border:1px solid #eee;float:left;"/>
            <div style="margin-left:10px;float:left;font-size:12px;line-height:25px;`+bz_css+`"><p>`+rec.goodsName+`</p>`+bz_text+`
            <p>货号：`+rec.goodsSn+`</p></div>`;
        },
        renderBeMall: function(e){
            if(e.value=="") return `<span style="color:#ec5151;">商城自营店</span>`;
            return `<span style="color:#ec5151;">`+ e.value +`</span>`;
        },
        renderPrice: function(e){
            var rec = e.record;
            var cx_text = "";
            if(rec.goodsType == 4)
                cx_text = `<p>促销价：<span style="color:#ec5151;margin-right:10px;">￥`+ rec.promotePrice+`</span> `+rec.timeTips+`</p>`;
            return `<div style="font-size:12px;line-height:25px;"><p>市场价：<span style="color:#ec5151;">￥<span style="text-decoration:line-through;">`+ rec.marketPrice+`</span></p>
            <p>本店价：<span style="color:#ec5151;">￥`+ e.value+`</span></p>`+cx_text+`</div>`;
        },
        renderSortOrder: function(e){
            var rec = e.record;
            return `<input type="text" class="text" style="width:30px;font-size:10px;height:20px;line-height:20px;" onblur="onSortBlur(this, '`+rec.id+`')" value="`+ e.value+`"/>`;
        },
        renderIsShow: function (e) {
            var rec = e.record;
            if (e.value == 1) {
                return `<div class="switch active" onclick="OnSwitch('` + rec.id + `', 0, this);">
                                            	<div class="circle"></div>
                                            </div>`;
            } else if (e.value == 0) {
                return `<div class="switch " onclick="OnSwitch('` + rec.id + `', 1, this);">
                                            	<div class="circle"></div>
                                            </div>`;
            }
        },
        renderCreateTime: function(e){
            var rec = e.record;
            return `<p><a class="btn-default btn_edit" data-placement="left" data-brief="`+rec.goodsBrief+`"><i class="sc_icon sc_icon_see"></i>查看信息</a></p>
            <p style="font-size:10px;margin-top:10px;">` + e.value + `</p>`;
        }
    }

    var onGoodsNodeClick = function(e){
        var sender = e.sender;
        var node = e.node;
        var grid = mini.get("goodsGrid");
        var ids = [];
        if(sender.isLeaf(node)){
            ids.push(node.catId);
        }else{
            $.each(sender.getChildNodes(node), function(i, obj){
                ids.push(obj.catId)
            });
        }

        grid.load({catIds:ids});
    }

    var OnSwitch = function (id, type, e) {
        $.post("${ctx}/goods/checkShow", {id: id, show: type}, function (res) {
            if (res.code == 0) {
                if (type == 0)
                    tips.success("该商品状态修改成功, 已隐藏!");
                else if (type == 1)
                    tips.success("该商品状态修改成功, 已显示!");

                if ($(e).hasClass("active")) {
                    $(e).removeClass("active");
                } else
                    $(e).addClass("active");
            } else {
                tips.error(res.message);
            }
        });
    }

    var onSortBlur = function(e, id){
        var value = $(e).val();
        if(!/^[0-9]*$/.test(value)){
            alert("序号只能输入数字!");
        }else{
            $.post("${ctx}/goods/updateSort", {id:id, sort: value}, function (res) {
                if (res.code == 0) {
                    tips.success("当前排序修改成功!");
                } else {
                    tips.error(res.message);
                }
            });
        }
    }
</script>